<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惠农通 - 数据概览</title>
    <link rel="icon" href="./assets/logo.ico" type="images/x-ico" />
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="admin-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <img src="assets/logo.png" alt="惠农通">
                    <h2>惠农通</h2>
                </div>
            </div>
            <nav class="sidebar-menu">
                <ul>
                    <li class="active" data-page="dashboard">
                        <i class="fas fa-chart-line"></i>
                        <span>数据概览</span>
                    </li>
                    <li data-page="employees">
                        <i class="fas fa-users"></i>
                        <span>员工管理</span>
                    </li>
                    <li  data-page="expert">
                        <i class="fas fa-user-tie"></i>
                        <span>专家管理</span>
                    </li>
                    <li  data-page="farm-management">
                        <i class="fas fa-warehouse"></i>
                        <span>农场管理</span>
                    </li>
                    <li  data-page="product">
                        <i class="fas fa-box-open"></i>
                        <span>产品管理</span>
                    </li>
                    <li data-page="order">
                        <i class="fas fa-shopping-cart"></i>
                        <span>订单管理</span>
                    </li>
                    <li data-page="ai-chat">
                        <i class="fas fa-robot"></i>
                        <span>AI问答</span>
                    </li>
                    <li data-page="activities">
                        <i class="fas fa-tractor"></i>
                        <span>农业活动</span>
                    </li>
                    <li data-page="settings">
                        <i class="fas fa-cog"></i>
                        <span>系统设置</span>
                    </li>
                </ul>
            </nav>
            <div class="sidebar-footer">
                <button class="logout-btn" id="logoutBtn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                </button>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <header class="main-header">
                <h1 id="pageTitle">数据概览</h1>
                <div class="user-info">
                    <span class="welcome">欢迎，<span id="currentUser">管理员</span></span>
                    <div class="avatar">
                        <i class="fas fa-user-circle"></i>
                    </div>
                </div>
            </header>

            <!-- 数据概览内容 -->
            <div class="page-content dashboard-page">
                <!-- 时间范围选择 -->
                <div class="dashboard-controls">
                    <div class="time-filter">
                        <button class="time-btn active">今日</button>
                        <button class="time-btn">本周</button>
                        <button class="time-btn">本月</button>
                        <button class="time-btn">全年</button>
                    </div>
                    <button class="primary-btn" id="refreshBtn">
                        <i class="fas fa-sync-alt"></i> 刷新数据
                    </button>
                </div>

                <!-- 核心指标展示 -->
                <div class="metric-showcase">
                    <!-- 农产品数据 -->
                    <div class="metric-card highlight">
                        <div class="metric-icon">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <div class="metric-content">
                            <div class="metric-value">248</div>
                            <div class="metric-label">农产品种类</div>
                            <div class="metric-trend up">
                                <i class="fas fa-arrow-up"></i> 较上周增长 8.5%
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户数据 -->
                    <div class="metric-card">
                        <div class="metric-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="metric-content">
                            <div class="metric-value">126</div>
                            <div class="metric-label">注册用户</div>
                            <div class="metric-trend up">
                                <i class="fas fa-arrow-up"></i> 本月新增 61人
                            </div>
                        </div>
                    </div>
                    
                    <!-- 交易数据 -->
                    <div class="metric-card">
                        <div class="metric-icon">
                            <i class="fas fa-exchange-alt"></i>
                        </div>
                        <div class="metric-content">
                            <div class="metric-value">21</div>
                            <div class="metric-label">今日交易</div>
                            <div class="metric-comparison">
                                达成率 <span class="text-success">92%</span> 目标
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据可视化区块 -->
                <div class="data-visualization">
                    <!-- 农产品分布 -->
                    <div class="visual-card">
                        <div class="card-header">
                            <h3><i class="fas fa-apple-alt"></i> 农产品分类占比</h3>
                            <div class="card-actions">
                                <button class="action-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="progress-bars">
                            <div class="progress-item">
                                <div class="progress-label">
                                    <span>粮食作物</span>
                                    <span>35%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 35%; background-color: #4CAF50;"></div>
                                </div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-label">
                                    <span>蔬菜水果</span>
                                    <span>28%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 28%; background-color: #2196F3;"></div>
                                </div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-label">
                                    <span>畜禽产品</span>
                                    <span>22%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 22%; background-color: #FFC107;"></div>
                                </div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-label">
                                    <span>其他</span>
                                    <span>15%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 15%; background-color: #9C27B0;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 用户活跃度 -->
                    <div class="visual-card">
                        <div class="card-header">
                            <h3><i class="fas fa-user-clock"></i> 用户活跃度</h3>
                            <div class="card-actions">
                                <button class="action-btn"><i class="fas fa-ellipsis-h"></i></button>
                            </div>
                        </div>
                        <div class="activity-levels">
                            <div class="level-item">
                                <div class="level-dot high"></div>
                                <div class="level-info">
                                    <div class="level-label">高活跃用户</div>
                                    <div class="level-value">34 <span class="text-muted">(27%)</span></div>
                                </div>
                            </div>
                            <div class="level-item">
                                <div class="level-dot medium"></div>
                                <div class="level-info">
                                    <div class="level-label">中活跃用户</div>
                                    <div class="level-value">61 <span class="text-muted">(48%)</span></div>
                                </div>
                            </div>
                            <div class="level-item">
                                <div class="level-dot low"></div>
                                <div class="level-info">
                                    <div class="level-label">低活跃用户</div>
                                    <div class="level-value">31 <span class="text-muted">(25%)</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="data-table-section">
                    <div class="section-header">
                        <h3><i class="fas fa-table"></i> 最新交易记录</h3>
                        <button class="secondary-btn">
                            <i class="fas fa-download"></i> 导出数据
                        </button>
                    </div>
                    <div class="styled-table-container">
                        <table class="styled-table">
                            <thead>
                                <tr>
                                    <th>交易ID</th>
                                    <th>农产品</th>
                                    <th>农户</th>
                                    <th>交易量</th>
                                    <th>金额(元)</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>#TRX-2023-0582</td>
                                    <td>优质大米</td>
                                    <td>张伟农场</td>
                                    <td>50吨</td>
                                    <td>24,500</td>
                                    <td><span class="status-badge completed">已完成</span></td>
                                </tr>
                                <tr>
                                    <td>#TRX-2023-0581</td>
                                    <td>新鲜苹果</td>
                                    <td>李娜果园</td>
                                    <td>200箱</td>
                                    <td>8,600</td>
                                    <td><span class="status-badge shipped">已发货</span></td>
                                </tr>
                                <tr>
                                    <td>#TRX-2023-0580</td>
                                    <td>有机鸡蛋</td>
                                    <td>王强养殖场</td>
                                    <td>500盒</td>
                                    <td>6,750</td>
                                    <td><span class="status-badge processing">处理中</span></td>
                                </tr>
                                <tr>
                                    <td>#TRX-2023-0579</td>
                                    <td>绿色蔬菜</td>
                                    <td>赵敏菜园</td>
                                    <td>150公斤</td>
                                    <td>3,200</td>
                                    <td><span class="status-badge completed">已完成</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="js/common.js"></script>
    <script src="js/dashboard.js"></script>
</body>
</html>